<!doctype html>
<html lang="en-US">
    <head>
        <title>React-admin - {{ page.title }}</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <meta name="description" content="{{ page.description }}" />
        <meta name="HandheldFriendly" content="true" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="storybook_path" content="{{ page.storybook_path }}" />
        <link
            rel="canonical"
            href="{{ page.name | replace: '.md', '.html' | relative_url }}"
        />
        <link
            rel="stylesheet"
            href="{{ '/css/materialize.min.css' | relative_url }}"
        />
        <link
            rel="stylesheet"
            href="{{ '/css/style-v22.css' | relative_url }}"
        />
        <link rel="stylesheet" href="{{ '/css/syntax.css' | relative_url }}" />
        <link rel="stylesheet" href="{{ '/css/prism.css' | relative_url }}" />
        <link rel="stylesheet" href="{{ '/css/tocbot.css' | relative_url }}" />
        <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
        />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.css"
            integrity="sha512-2kqK5bWDwdrluTn6Wkj+jgiwyzvAHLirVp08Kz7kN5I8PWQ0tUtEMxfhyWDCrnws91BJ9PfrUy6ImfA7Qb22TA=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link
            rel="stylesheet"
            href="{{ '/css/docsearch.css' | relative_url }}"
        />
        <!-- Newsletter form -->
        <style>
            @font-face {
                font-display: block;
                font-family: Roboto;
                src:
                    url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2)
                        format('woff2'),
                    url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff)
                        format('woff');
            }

            @font-face {
                font-display: fallback;
                font-family: Roboto;
                font-weight: 600;
                src:
                    url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2)
                        format('woff2'),
                    url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff)
                        format('woff');
            }

            @font-face {
                font-display: fallback;
                font-family: Roboto;
                font-weight: 700;
                src:
                    url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2)
                        format('woff2'),
                    url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff)
                        format('woff');
            }

            #sib-container input:-ms-input-placeholder {
                text-align: left;
                font-family: 'Helvetica', sans-serif;
                color: #c0ccda;
            }

            #sib-container input::placeholder {
                text-align: left;
                font-family: 'Helvetica', sans-serif;
                color: #c0ccda;
            }

            #sib-container textarea::placeholder {
                text-align: left;
                font-family: 'Helvetica', sans-serif;
                color: #c0ccda;
            }
        </style>
        <link
            rel="stylesheet"
            href="{{ '/css/newsletter.css' | relative_url }}"
        />
    </head>

    <body>
        <header>
            {% include nav.html %}
            <ul id="slide-out" class="sidenav sidenav-fixed">
                <li class="logo">
                    <a href="{{ site.url }}"
                        ><img src="{{ site.url }}/assets/logo_white.png"
                    /></a>
                </li>
                <li class="version">{% include versions.html %}</li>
                {% include_relative navigation.html %}
            </ul>
        </header>

        <main>
            <div class="container sticker-container">
                <div class="row">
                    <div class="col s12 m9">
                        <div
                            class="markdown-section DocSearch-content toc-content"
                        >
                            {{ content }}
                        </div>
                    </div>
                    <div class="col hide-on-small-only m3 toc-container">
                        <div class="toc"></div>
                    </div>
                </div>
            </div>
        </main>

        <script src="{{ '/js/materialize.min.js' | relative_url }}"></script>
        <script src="{{ '/js/ra-navigation.js' | relative_url }}"></script>
        <script src="{{ '/js/prism.js' | relative_url }}"></script>
        <script
            src="{{ '/js/ra-doc-exec.js' | relative_url }}"
            type="module"
            defer
            async
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.min.js"
            defer
            integrity="sha512-oD3xGN8YTxenx6tdS4D/RKqO4OtORBQtAb2/FseM17GGMIi6jMwKUBc8duX4A5RwMOGGXoFBZrsqbOk8GpXFgQ=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        ></script>

        <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
        {% if page.dir contains "doc" %} {% assign version = page.dir | split:
        '/' | last %} {% else %} {% assign version = "latest" %} {% endif %}
        <script type="text/javascript">
            docsearch({
                container: '#docsearch',
                appId: 'QY9T9CVM2N',
                indexName: 'marmelab-react-admin',
                apiKey: '75332227370be3dc35777cee6244881a',
                searchParameters: {
                    facetFilters: ['version:  {{ version }}'],
                    attributesToHighlight: ['hierarchy.lvl0'],
                },
            });
        </script>

        <!--
        React-admin protects your privacy!
        We use our own self-hosted tracking solution to collect some raw metrics,
        like page views, device type (mobile, desktop, etc.) or country.
        We don't track any personal information about our visitors.
    -->
        <script
            async
            defer
            data-website-id="ef7f8242-2808-4cbf-9dff-564daa515bbd"
            src="https://gursikso.marmelab.com/script.js"
        ></script>

        <!-- Newsletter form -->
        <script>
            window.REQUIRED_CODE_ERROR_MESSAGE = 'Please choose a country code';
            window.LOCALE = 'en';
            window.GENERIC_INVALID_MESSAGE =
                window.EMAIL_INVALID_MESSAGE =
                window.SMS_INVALID_MESSAGE =
                    'The information provided is invalid. Please review the field format and try again.';
            window.REQUIRED_ERROR_MESSAGE = 'This field is required.';

            var AUTOHIDE = Boolean(0);
        </script>

        {% include banner_script.html %}
    </body>
</html>
